<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/backstage/util.jsp"></jsp:include>
<title>用户管理</title>
<script>
//上一页
function upPage1(){
	pageForm.action="${pageContext.request.contextPath }/user/selectSysUser?page=${p.prePage}";
	pageForm.submit();
}
//下一页
function nextPage1(){
	pageForm.action="${pageContext.request.contextPath }/user/selectSysUser?page=${p.nextPage}";
	pageForm.submit();
}
//首页
function firstPage1(){
	pageForm.action="${pageContext.request.contextPath }/user/selectSysUser?page=${p.firstPage}";
	pageForm.submit();
}
//尾页
function lastPage1(){
	pageForm.action="${pageContext.request.contextPath }/user/selectSysUser?page=${p.lastPage}";
	pageForm.submit();
}
//跳转
function tiaozhuan(){
	var page=$("#page").val();
	if(page>'${p.pages}'){
		alert("没有这么多页..");
		return;
	}
	pageForm.action="${pageContext.request.contextPath }/user/selectSysUser";
	pageForm.submit();
}
</script>

</head>
<body>
	<form id="myForm" method="post">
	<div class="form-inline">
		<div class="form-group">
		<label for="username">管理员姓名</label> <input type="text"
			class="form-control" id="username" name="username"
			placeholder="请输入管理员姓名" value="${username }">
		</div>
		<div class="form-group">
		<label for="account">管理员账号</label> <input type="text"
			class="form-control" id="account" name="account"
			placeholder="请输入管理员账号" value="${account }">
		</div>
		<div class="form-group">
			<label for="dept_id">组织名称</label> <select id="dept_id" name="dept_id"
				class="form-control">
				<option value="-1">请选择</option>
			</select>
		</div>
		<shiro:hasPermission name="user:select">
		<button type="button" class="btn btn-primary" onclick="likeSysUser()">
			<span class="glyphicon glyphicon-search" id="refersh"></span>综合查询
		</button>
		</shiro:hasPermission>
		<shiro:hasPermission name="user:insert">
		<button type="button" class="btn btn-primary" data-toggle='modal'
			data-target='#myModal' id="user_add" name="user_add">
			<span class="glyphicon glyphicon-plus"></span>用户新增
		</button>
		</shiro:hasPermission>
	</div>
	</form>
	
	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						onclick="ClearVal()">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">管理员</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="form" method="post">
						<input type="hidden" name="user_id" id="user_id" value="0"/>
						<input type="hidden" name="account2" id="account3"/>
						<div class="form-group">
							<label for="username" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="username2"
									name="username" placeholder="请输入用户姓名">
							</div>
						</div>
						<div class="form-group">
							<label for="account" class="col-sm-2 control-label">账号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="account2"
									name="account" placeholder="请输入账号">
							</div>
						</div>
						<div class="form-group" id="div1">
							<label for="password" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-10">
								<input type="password" class="form-control" id="password"
									name="password" placeholder="请输入密码">
							</div>
						</div>
						
						<div class="form-group">
							<label for="system_state" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									id="sex" value="1" name="sex"> 男
								</label> <label class="radio-inline"> <input type="radio"
									id="sex1" value="2" name="sex"> 女
								</label>
							</div>
						</div>
						 <div class="form-group">
								<label for="dept_id" class="col-sm-2 control-label">组织名称</label>
								<div class="col-sm-10">
									<select class="form-control" id="dept_id2" name="dept_id">
										<option value="-1">--请选择--</option>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label for="dept_id" class="col-sm-2 control-label">角色名称</label>
								<div class="col-sm-10">
									<select class="form-control" id="role_id" name="sysRole.role_id">
										<option value="-1">--请选择--</option>
									</select>
								</div>
							</div>
						
						<div class="form-group" id="div2" style="display: none">
							<label for="status" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									 value="1" name="status"> 正常
								</label> <label class="radio-inline"> <input type="radio"
									 value="2" name="status"> 冻结
								</label>
							</div>
						</div>
						
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">电话号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="mobile"
									name="mobile" placeholder="请输入电话号码">
							</div>
						</div>
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">qq号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="qq"
									name="qq" placeholder="请输入qq号码">
							</div>
						</div>
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">微信</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="wechat"
									name="wechat" placeholder="请输入微信">
							</div>
						</div>
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="email"
									name="email" placeholder="请输入email">
							</div>
						</div>
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="address"
									name="address" placeholder="请输入地址">
							</div>
						</div>
						<div class="form-group">
							<label for="system_phone" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="remark"
									name="remark" placeholder="请输入描述">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default"  data-dismiss="modal"
					onclick="ClearVal()">关闭</button>
					<button type="button" class="btn btn-primary" 
						onclick="Save_SysUser()">保存</button>
				</div>
			</div>
		</div>
	</div>
	<form method="post" id="pageForm">
	<table class="table-hover table-condensed table-bordered" width="100%">
		<tr>
			<th>编号</th>
			<th>用户账号</th>
			<th>用户名称</th>
			<th>性别</th>
			<th>创建时间</th>
			<th>组织机构名称</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="su" varStatus="statu">
			<tr>
				<td>${statu.index+1 }</td>
				<td>${su.account }</td>
				<td>${su.username }</td>
				<td>${su.sex=='1'?'男':su.sex=='2'?'女':'未知性别' }</td>
				<td><fmt:formatDate value="${su.create_time }" pattern="yyyy-MM-dd"/></td>
				<td>${su.dept_name }</td>
				<td>
				<c:if test="${su.status=='2' }">
					<button type="button" class='btn btn-danger' onclick="unfreeze(${su.user_id})">
					<span class="glyphicon glyphicon-lock"></span>解冻</button>
				</c:if>
				<shiro:hasPermission name="user:delete">
				<button type="button" class='btn btn-info' onclick="deleteSysUser(${su.user_id})">
				<span class='glyphicon glyphicon-remove'></span>删除</button>
				</shiro:hasPermission>
				<shiro:hasPermission name="user:update">
				 <button type='button' id='user_update' class='btn btn-info' data-toggle='modal' data-target='#myModal' 
				 onclick="updateSysUser(${su.user_id})"><span class='glyphicon glyphicon-pencil'></span>修改</button>
				 </shiro:hasPermission>
				</td>
			</tr>
		</c:forEach>
	</table>
	一共${p.pages }页,${p.total }条,当前在${p.pageNum },每页显示:${p.pageSize },当前页${p.size }
	<a href="#" onclick="upPage1()">上一页</a>
	<a href="#" onclick="nextPage1()">下一页</a>
	<a href="#" onclick="firstPage1()">首页</a>
	<a href="#" onclick="lastPage1()">尾页</a>
	<input type="text" size="3" name="page" id="page">
	<button type="button" onclick="tiaozhuan()">跳转</button>
	</form>
</body>
<script>

//解冻
function unfreeze(user_id){
	form.action="${pageContext.request.contextPath }/user/unfreezeSysUser?user_id="+user_id;
	form.submit();
}

//删除用户
function deleteSysUser(user_id){
	form.action="${pageContext.request.contextPath }/user/deleteSysUser?user_id="+user_id;
	form.submit();
}

//清空文本框值
function ClearVal(){
	$("#form").data('bootstrapValidator').resetForm(); //刷新表单
	$("#user_id").val("0");
	$("#div1").show();
	$("#div2").css("display","none");
	$("#account2").val("");
	$("#username2").val("");
	$("[name=sex]").attr("checked",false);
	$("#dept_id2").val("-1");
	$("[name=status]").attr("checked",false);
	$("#mobile").val("");
	$("#qq").val("");
	$("#wechat").val("");
	$("#email").val("");
	$("#address").val("");
	$("#remark").val("");
	$("#account3").val("");
	$("#role_id").val("-1");
}

//修改
function updateSysUser(user_id) {
	$("#div1").hide();
	$("#div2").css("display","block");
	$.ajax({
		url:'${pageContext.request.contextPath }/user/querySysUser',
		type:'post',
		data:{"user_id":user_id},
		success:function(msg){
			var pojo=eval('('+msg+')');
			$("#user_id").val(pojo.user_id)
			$("#account2").val(pojo.account);
			$("#account3").val(pojo.account);
			$("#username2").val(pojo.username);
			$("input[type=radio][name=sex][value="+pojo.sex+"]").attr("checked",'checked');
			$("#dept_id2").val(pojo.sysDepts.dept_id);
			$("input[type=radio][name=status][value="+pojo.status+"]").attr("checked",'checked');
			$("#mobile").val(pojo.mobile);
			$("#qq").val(pojo.qq);
			$("#wechat").val(pojo.wechat);
			$("#email").val(pojo.email);
			$("#address").val(pojo.address);
			$("#remark").val(pojo.remark);
			$("#role_id").val(pojo.sysRole.role_id);
		}
	})
}
	
//保存
function Save_SysUser(){
	var bootstrapValidator = $("#form").data('bootstrapValidator'); //获取表单对象
	bootstrapValidator.validate();//触发全部验证 
	if(bootstrapValidator.isValid()){
		form.action="${pageContext.request.contextPath }/user/insertSysUser";
		form.submit();
	}
}	

//填充下拉框	
	$(function(){
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath }/user/selectSysDept",
			success:function(msg){
				$.each(msg,function(index,sysDept){
					var option="<option value="+sysDept.dept_id+">"+sysDept.dept_name+"</option>";
					$("#dept_id").append(option);
					$("#dept_id2").append(option);
					if('${dept_id}'!=0 && '${dept_id}'!=''){
						$("#dept_id").val('${dept_id}');
					}
				});
			}
		});
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath }/role/querySysRole",
			success:function(msg){
				$.each(msg,function(index,sysRole){
					var option="<option value="+sysRole.role_id+">"+sysRole.role_name+"</option>";
					$("#role_id").append(option);
				});
			}
		});
	});
//综合查询（模糊查询）
	function likeSysUser(){
		myForm.action="${pageContext.request.contextPath }/user/selectSysUser";
		myForm.submit();
	}
//校验空值
	$(function(){
		$("#form").bootstrapValidator({
			live : 'enabled',
			feedbackIcons : { //验证时显示的图标
				valid : 'glyphicon glyphicon-ok', //正确图标
				invalid : 'glyphicon glyphicon-remove', //错误图标
				validating : 'glyphicon glyphicon-refresh' //正在更新图标
			},
			fields : { //要验证哪些字段
				account : {
					validators : {//验证
						notEmpty : { //非空判断
							message : '用户名不能为空' //验证错误时的信息，
						},
						stringLength : {//长度判断
							message : '用户名为5-15个之间',//验证错误信息
							min : 5,//不得小于
							max : 15//不得大于
						},
						regexp : { //正则表达式判断 
							regexp : /^[a-zA-Z0-9_]+$/, //表达式内容
							message : '用户名只能为字母和数组组成' //验证错误时的信息，
						},
						 remote : {
								message : '用户名已存在',
								url : '${pageContext.request.contextPath }/user/findByIdSysUser',
								type : 'post',
								delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
								data:function(validator){
									return{
										account:$("#account2").val(),
										account2:$("#account3").val()
									}
								}
							} 
					},
				},
				password : {
					validators : {//验证
						notEmpty : { //非空判断
							message : '密码不能为空' //验证错误时的信息，
						},
						stringLength : {
							min : 3,
							message : '密码不能小于3位数'
						},
						different : {//不能和用户名相同
							field : 'account',//需要进行比较的input name值
							message : '不能和用户名相同'
						},
						regexp : {
							regexp : /^[a-zA-Z0-9_\.]+$/,
							message : '密码有数字和字符组成'
						}
					}
				},
				username : {
					validators : {//验证
						notEmpty : { //非空判断
							message : '姓名不能为空' //验证错误时的信息，
						},
					}
				},
				sex:{
					validators : {//验证
						notEmpty : { //非空判断
							message : '性别不能为空' //验证错误时的信息，
						},
					}
				},
				dept_id:{
	        		validators:{
	        			callback : {
							message : '必须选择一个组织机构',
							callback : function(value, validator) {
								if (value == '-1') {
									return false;
								} else {
									return true;
								}
							}
						}
	        		}
	        	},
				mobile:{
					 validators: {
	                     notEmpty: {
	                         message: '手机号码不能为空'
	                     },
	                     stringLength: {
	                         min: 11,
	                         max: 11,
	                         message: '请输入11位手机号码'
	                     }
	                 }
				}
			}
		});
	});
</script>
</html>